<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>熊猫格子</title>
    <link rel="stylesheet" type="text/css" href="../../../static/css/info_common_0304.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/css/book/list/book_list.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/css/weui.min.css"/>
</head>
<body ontouchstart onbeforeunload="SetBrowseRecord();">
<div class="header">
    <span class="back" onclick="history.back()"><div></div></span>
    <p class="title">全部图书</p>
    <img src="../../../static/img/buttom/find.png" class="find">
</div>
<div class="classify">
    <span class="sub_title active" data-order="default">默认<span class="line"></span></span>
    <span class="sub_title" data-order="sales">销量优先<span class="line"></span></span>
    <span class="sub_title" data-order="new">最新上架<span class="line"></span></span>
</div>
<div class="content">
    <div id="book_list"></div>
</div>
<div class="screen_body" style="display: none;">
    <div class="back_body"></div>
    <div class="user_self">
        <p class="paixu">筛选</p>
        <div class="price">
            <p>价格区间（元）</p>
            <p class="choice">
                <input id="minPrice" type="text" data-role="none" class="min" placeholder="最低价"
                       onfocus="this.placeholder=''" onblur="this.placeholder='最低价'"><span class="hr"></span><input
                    id="maxPrice" type="text" data-role="none" class="max" placeholder="最高价"
                    onfocus="this.placeholder=''"
                    onblur="this.placeholder='最高价'">
            </p>
        </div>
        <div id="bookType" class="booktype">
            <p class="type">图书类型</p>
        </div>
        <div id="bookLanguage" class="word">
            <p>语言文字</p>
            <button data-id="中文">中文</button>
            <button data-id="英文">英文</button>
            <button data-id="中英双语">中英双语</button>
        </div>
        <div class="button">
            <button class="false" id="reset">重置</button>
            <button id="searchTrue" class="true">确定</button>
        </div>
    </div>
</div>
<div style="display: none">
    <script src="https://s22.cnzz.com/z_stat.php?id=1267301812&web_id=1267301812" language="JavaScript"></script>
</div>
</body>
<script type="text/javascript" src="../../../static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="../../../static/js/weui.min.js"></script>
<script type="text/javascript" src="../../../static/js/core/underscore.js"></script>
<script type="text/javascript" src="../../../static/js/core/util.js"></script>
<script type="text/javascript" src="../../../static/js/core/ocean.js"></script>
<script type="text/javascript" src="../../../static/js/dropload.min.js"></script>
<script>
    var from = ocean.getRequestParameter("from");
    var params = {
        page: 0,
        limit: 12,
        from: from,
        classify: null,
        order: 'default'
    };
    var loader;
    $(function () {
        loader = $('.content').dropload({
            scrollArea: window,
            domDown: {
                domClass: 'weui-loadmore ',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span>',
                domNoData: '<span class="weui-loadmore__bottom">没有更多数据了</span>'
            },
            loadDownFn: function () {
                params.page += 1;
                loadPageData();
            }
        });
        loadBookType();
        GetBrowseRecord();
    });

    //获取浏览记录
    function GetBrowseRecord() {
        if (sessionStorage.getItem('browseRecord') != "" && sessionStorage.getItem('browseRecord') != null) {
            var browseRecord = JSON.parse(sessionStorage.getItem('browseRecord'));
            console.log("---", browseRecord);
            if(window.location.href.indexOf(browseRecord.page) > -1){
                $(".sub_title").each(function () {
                    if ($(this).data("order") == browseRecord.order) {
                        $(this).siblings().removeClass("active");
                        $(this).addClass("active");
                    }
                });
                params.order = browseRecord.order;
                loadPageData();
                // loadPageData(function () {
                // setTimeout(function () {
                //     $("body").scrollTop(browseRecord.height);
                // }, 100)
                // });
            }
        }
    }

    //保存浏览记录
    function SetBrowseRecord() {
        var array = window.location.href.split('/');
        var browseRecord = {}
        browseRecord.page = array[array.length-1];
        browseRecord.order = params.order;
        // browseRecord.height = $("body").scrollTop();
        sessionStorage.setItem('browseRecord', JSON.stringify(browseRecord))
    }


    //菜单选择
    $(".sub_title").click(function () {
        if (!$(this).hasClass("active")) {
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            params.order = $(this).data("order");
            params.page = 1;
            loadPageData();
        }
    });
    //筛选
    $(".find").click(function () {
        $(".screen_body").css("display", "");
    });

    //关闭筛选框
    $(".back_body").click(function () {
        $(".screen_body").css("display", "none");
    });

    //筛选条件选择
    $("#bookLanguage button").on("click", function () {
        $(this).siblings().removeClass("active");
        $(this).addClass("active")
    });

    //重置
    $("#reset").on("click", function () {
        $("#minPrice").val("");
        $("#maxPrice").val("");
        $("#bookType button").removeClass("active");
        $("#bookLanguage button").removeClass("active");
    });

    //确定
    $("#searchTrue").on("click", function () {
        $(".screen_body").css("display", "none");
        params.page = 1;
        params.classify = $("#bookType button.active").data("id");
        params.language = $("#bookLanguage button.active").data("id");
        params.max = $("#maxPrice").val();
        params.min = $("#minPrice").val();
        loadPageData();
    });

    function loadBookType() {
        ocean.get("resources/biz/api/book/classify_", {pid: "root"}, function (res) {
            if (res.code == 0) {
                $.each(res.data.array, function (index, item) {
                    $("#bookType").append("<button data-id=\"" + item.id + "\">" + item.name + "</button> \n");
                });

                $("#bookType button").on("click", function () {
                    $(this).siblings().removeClass("active");
                    $(this).addClass("active");
                });
            }
        });
    }

    function loadPageData(callback) {
        var order = $(".sub_title.active").data("order");
        params.order = order;
        ocean.get("resources/biz/api/book/list", params, function (res) {
            if (res.code == 0) {
                console.log(res.data);
                var template = _.template($('#temp_book_item').html());
                if (res.data.isFirstPage || res.data.pageNum == 0) {
                    $('#book_list').html("");
                }
                $('#book_list').append(template({list: res.data.list, showPrice: from != "library"}));

                if (callback) {
                    callback();
                }
                if (res.data.isLastPage) {
                    loader.lock();
                    loader.noData(true);
                } else {
                    loader.unlock();
                    loader.noData(false);
                }
                loader.resetload();
                afterLoad();
            }
        });
    }

    function afterLoad() {
        $(".lazy").lazyload({
            effect: "fadeIn",
            threshold: 0,
            failurelimit: 10
        });

        $(".book_info").on("click", function () {
            location.href = "../book_info.html?from=" + from + "&id=" + $(this).data("id");
        });
        score_star();
    }
</script>
<script type="text/template" id="temp_book_item">
    <@_.each(list, function (item) {@>
    <!--<div class="book_info" data-id="<@=item.id@>">
        <div class="img lazy" data-original="<@=item.picture@>"
             style="background-image: url('../../../static/img/book.jpg')"></div>
        <div class="text">
            <p class="name"><@=item.name@></p>
            <p class="author"><@=item.author@></p>
            <p class="from"><@=item.publishing@></p>
            <@if(showPrice){@>
            <@if(item.isExchange){@>
            <p class="score"><img src="../../../static/img/buttom/star.png">熊猫币兑换</p>
            <@}@>
            <p class="money">￥<@=item.price@><span>(<@=item.discount@>折)</span></p>
            <@}@>
            <div class="grade">
                <span class="label">豆瓣评分</span>
                <div class="star" data-score="<@=item.score@>">
                    <img src="../../../static/img/bookinfo/star0.png">
                    <img src="../../../static/img/bookinfo/star0.png">
                    <img src="../../../static/img/bookinfo/star0.png">
                    <img src="../../../static/img/bookinfo/star0.png">
                    <img src="../../../static/img/bookinfo/star0.png">
                </div>
                <span class="number">(<@=item.score.toFixed(1)@>)</span>
            </div>
        </div>
    </div>-->
    <div class="book_info" data-id="<@=item.id@>">
        <div class="img lazy" data-original="<@=item.picture@>"
             style="background-image: url('../../../static/img/book.jpg')">
            <@if(item.stock<=0){@>
            <div class="no_img"><p>无货</p></div>
            <@}@>
        </div>
        <div class="text">
            <p class="name"><@=item.name@></p>
            <p class="author"><@=item.author@></p>
            <div class="grade">
                <span class="label">豆瓣评分</span>
                <div class="star" data-score="<@=item.score@>">
                    <img src="static/img/bookinfo/star0.png">
                    <img src="static/img/bookinfo/star0.png">
                    <img src="static/img/bookinfo/star0.png">
                    <img src="static/img/bookinfo/star0.png">
                    <img src="static/img/bookinfo/star0.png">
                </div>
                <span class="number">(<@=item.score.toFixed(1)@>)</span>
            </div>
            <!--<p class="from"><@=item.publishing@></p>-->
            <p class="money">
                <span class="used">二手价</span>
                <!--<span class="num">￥<@=item.price@></span>-->
                <span class="num">￥<span class="int"><@=item.price.toString().split('.')[0]@></span>.<@=item.price.toString().split('.')[1]@></span>
                <span class="discount"><@=item.discount@>折</span></p>
        </div>
    </div>
    <@ }); @>
</script>
</html>
